<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
    收集表单数据：
        <input type="text"/>，则v-model收集的是value值，用户输入的就是value值了
        <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值 需要添加name属性 添加到一个组中
        <input type="checkbox"/>
            1.input中没有value属性，那么收集的的就是checked（勾选 or 未勾选，是布尔值）
            2.配置input的value属性:
                (1).v-model的初始值是非数组，那么收集的的就是checked（勾选 or 未勾选，是布尔值）
                (2).v-model的初始值是数组，那么收集的的就是value组成的数组
-->
<div id="root">
    <form @submit.prevent="getInfo">
        账号<input type="text" v-model="info.account" value="username"> <br>
        密码 <input type="text" v-model="info.password" value="password"> <br>
        性别 男<input type="radio" v-model="info.sex" name="male" value="male">
        女<input type="radio" v-model="info.sex" name="female" value="female"> <br>
        爱好
        玩游戏<input type="checkbox" v-model="info.hobby" value="playing" />
        跑步<input type="checkbox" v-model="info.hobby" value="running"/>
        游泳<input type="checkbox" v-model="info.hobby" value="swimming"/><br>
        所属校区 <select  v-model="info.city">
        <option value="">请选择所选校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
    </select><br>
        其他信息 <textarea v-model="info.others" cols="30" rows="10"></textarea><br><br>
        <input type="checkbox" v-model="info.agree">阅读并接收 <a href="https://www.baidu.com">《用户协议》</a>
        <button>提交</button>
    </form>

</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    new Vue({
        el:"#root",
        data(){
            return {
                info:{
                    account:"",
                    password:"",
                    sex:'',
                    hobby:[],
                    city:"",
                    others:"",
                    agree:false
                }

            }
        },
        methods:{
            getInfo(){
                console.log(this.info)
            }
        }
    })
</script>
</body>
</html>